<template>
    <div class="app-container">
        <div class="title">人资管理员工作台</div>
        <div class="workbench" align="stretch">
            <div class="workbench__container">
                <profileShow
                    :title="personInfo.title"
                    :subTitle="personInfo.subTitle"
                    :showData="personInfo.showData"
                ></profileShow>

                <salaryShow
                    :subTitle="personInfo.subTitle"
                    :person="salaryInfo.person"
                    :salary="salaryInfo.salary"
                    :department="salaryInfo.department"
                ></salaryShow>

                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>招聘动态</span>
                    </div>
                    <el-timeline>
                        <el-timeline-item
                            v-for="(activity, index) in recruitmentLogs"
                            :key="index"
                            :timestamp="activity.createTime"
                            placement="top"
                        >
                            <el-card>
                                <h4>{{ activity.title }}</h4>
                                <div v-html="activity.content"></div>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
import profileShow from "./components/profileShow";
import salaryShow from "./components/salaryShow";
import {
    getPersonnelStatistics,
    getMonthlyStatistics,
    getHrmRecruitmentLog,
} from "@/api/workBench";

export default {
    // 工作台
    name: "workCenter",
    components: {
        profileShow,
        salaryShow,
    },
    props: {},
    data() {
        return {
            //人事概况
            personInfo: {
                title: "员工数据",
                subTitle: "xxx时间段内",
                showData: [
                    {
                        label: "在职",
                        value: "xx",
                    },
                    {
                        label: "新入职",
                        value: "xx",
                    },
                    {
                        label: "离职",
                        value: "xx",
                    },
                    {
                        label: "退休",
                        value: "xx",
                    },
                    {
                        label: "转正",
                        value: "xx",
                    },
                    {
                        label: "调岗人数",
                        value: "xx",
                    },
                ],
            },
            zpInfo: {
                title: "招聘动态",
                subTitle: "xxx时间段内",
                showData: [
                    {
                        label: "正在招聘职位",
                        value: "xx",
                    },
                    {
                        label: "评选中",
                        value: "xx",
                    },
                    {
                        label: "待入职",
                        value: "20",
                    },
                    {
                        label: "已入职",
                        value: "20",
                    },
                ],
            },
            salaryInfo: {
                person: 0,
                salary: 0,
                department: 0,
            },
            recruitmentLogs: [], // 招聘动态数据
        };
    },

    computed: {},
    watch: {},
    created() {
        this.getPersonInfo();
        this.getSalaryInfo();
        this.getHrmRecruitmentLog();
    },
    mounted() {},

    beforeDestroy() {},
    methods: {
        getPersonInfo() {
            //获取当前年月
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth();
            this.personInfo.subTitle = year + "年" + month + "月";
            getPersonnelStatistics({ year: year, month: month }).then((res) => {
                console.log(res, "res");
                if (res.code == 200) {
                    this.personInfo.showData[0].value = res.data.zaizhi;
                    this.personInfo.showData[1].value = res.data.sx;
                    this.personInfo.showData[2].value = res.data.lz;
                    this.personInfo.showData[3].value = res.data.tx;
                    if (this.$store.getters.allDefectObj["HR-WEB-020"] == 0) {
                        //删除数组某一个元素
                        this.personInfo.showData.splice(3, 1);
                    }
                    this.personInfo.showData[4].value = res.data.zz;
                    this.personInfo.showData[5].value = res.data.zg;
                }
            });
        },
        getSalaryInfo() {
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth();
            getMonthlyStatistics({ year: year, month: month }).then((res) => {
                console.log(res, "res");
                if (res.code == 200) {
                    this.salaryInfo.person = res.data.zrs;
                    this.salaryInfo.salary = res.data.sfrs;
                    // 计算占比
                    if (res.data.zrs == 0 || res.data.sfrs == 0) {
                        this.salaryInfo.department = 0;
                        return;
                    }
                    this.salaryInfo.department =
                        (res.data.sfrs / res.data.zrs) * 100;
                    // this.salaryInfo.department =55;
                    //
                }
            });
        },
        getHrmRecruitmentLog() {
            getHrmRecruitmentLog().then((res) => {
                if (res.code === 200) {
                    this.recruitmentLogs = res.rows;
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.title {
    font-size: 24px;
    line-height: 28px;
    color: #182b4e;
}

.workbench {
    padding-bottom: 40px;
    margin-top: 16px;

    &__left {
        flex: 1;
        flex-shrink: 0;
        min-width: 700px;
    }

    &__right {
        flex-shrink: 0;
        width: 450px;
        margin-left: 15px;
    }

    .el-card + .el-card,
    .statistics-card + .statistics-card {
        margin-top: 15px;
        border-top: none;
    }

    ::v-deep .statistics-card {
        border: 0;
        //   box-shadow: $--box-shadow-bottom-light;
    }
}

.box-card {
    margin-top: 20px;
}
</style>
